<template>
  <div class="p21">
    <div class="p21-center-right" @click="isIframe"></div>
    <div
      v-if="showIframe"
      class="iframe"
      draggable="true"
      @dragend="changePosition"
      v-clickoutside="closeIframe"
      :style="{'top':iframePosition.top+'px','left':iframePosition.left+'px'}"
    >
      <div class="iframe-title">
        <span>数字化县公司</span>
        <span @click="isIframe">
          <Icon type="close"></Icon>
        </span>
      </div>
      <div>
        <iframe width="2100px" height="830px" src="http://10.208.126.168/cip/"></iframe>
      </div>
    </div>
  </div>
</template>
<script>
import clickoutside from "../../assets/directives/clickoutside.js";
import WOW from "wow.js";
export default {
  name: "p21",
  created() {
    new WOW().init();
  },
  mounted() {
    document.addEventListener("keyup", this.changePage);
  },
  data() {
    return {
      showIframe: false,
      iframePosition: {
        top: 150,
        left: 400
      }
    };
  },
  methods: {
    changePage(e) {
      //右键
      if (e.keyCode == 40||e.keyCode==34) {
        this.$router.replace(`/ppt/p22`);
      }
      //左键
      if (e.keyCode == 38||e.keyCode==33) {
        this.$router.replace(`/ppt/p20`);
      }
    },
    isIframe(e) {
      this.showIframe = !this.showIframe;
      e.stopPropagation();
    },
    closeIframe(e) {
      this.showIframe = false;
      e.stopPropagation();
    },
    //改变位置
    changePosition(e) {
      this.iframePosition = {
        top: e.y,
        left: e.x
      };
    }
  },
  directives: { clickoutside },
  beforeDestroy() {
    document.removeEventListener("keyup", this.changePage);
  },
  watch: {
    $route: {
      handler(n, v) {
        document.addEventListener("keyup", this.changePage);
      },
      deep: true
    }
  }
};
</script>
<style lang="scss" scoped>
.p21 {
  background-image: url("../../assets/images/pptScreen/pFirst/21.png");
  position: relative;
}
.p21-center-right {
  position: absolute;
  width: 803px;
  height: 296px;
  top: 460px;
  left: 1077px;
  cursor: pointer;
}
.iframe {
  width: 2800px;
  position: absolute;
  z-index: 999;
  top: 90px;
  left: 700px;
  &-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    font-weight: bold;
  }
}
</style>